﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- Web -->
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" href="/static/login/css/aui.css">
    <link rel="stylesheet" href="/static/login/css/swiper.min.css">
    <link rel="stylesheet" href="/static/login/css/main.css">
    <style media="screen">

        html,body {
            background: white;
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
            padding: 2rem;
        }

        .mid {
            width: 100%;
        }

        .row {
            width: 100%;
            height: 2.2rem;
            position: relative;
            border-bottom: 1px solid rgba(153,153,153,0.30);
        }

        .row:nth-of-type(n){
            margin-bottom: 1rem;
        }

        .row img {
            width: 1rem;
            position: absolute;
            left: 0;
            top: 0.6rem;
        }

        .row input {
            width: 100%;
            height: 2.2rem;
            line-height: 2.2rem;
            padding-left: 1.5rem;
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #333333;
            letter-spacing: 0;
        }

        input::-webkit-input-placeholder {
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: rgba(153,153,153,0.50);
            letter-spacing: 0;
        }

        .btm {
            width: 100%;
        }

        .btn {
            width: 100%;
            line-height: 2.2rem;
            background: #F9B701;
            border-radius: 6px;
            text-align: center;
            color: white;
            margin-top: 50px;
        }

        .yzm {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #F9B701;
            letter-spacing: 0;
            text-align: center;
            z-index: 2;
        }
        .aui-bar-nav{
            background: #F9B701;
        }
        .aui-bar-nav .aui-title, .aui-bar-nav .aui-pull-left, .aui-bar-nav .aui-pull-right, .aui-bar-nav .aui-iconfont{
            color:#fff;
        }
    </style>
</head>

<body>
    <div class="header">
        <header class="aui-bar aui-bar-nav header1" id="header" >
            <a class="aui-pull-left" onclick="h.closeWin();">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">
                注册
            </div>
            <a class="aui-pull-right" >

            </a>
        </header>
    </div>
    <div id="app" v-cloak>
        <div class="layui-form">
        <div class="mid" style="margin-top:63px;">
            <div class="row">
                <img src="/static/login/picture/phone.png" alt="">
                <input type="number" name="mobile" value="" placeholder="请输入手机号" v-model="mdata.tel">
            </div>
            <div class="row">
                <img src="/static/login/picture/code.png" alt="">
                <input type="text" name="authcode" value="{}" v-model="mdata.authcode" placeholder="请输入验证码">
                <span class="yzm" @click="sendcode">{{sendcodemsg}}</span>
            </div>
            <div class="row">
                <img src="/static/login/picture/pass.png" alt="">
                <input type="password" name="password" value="" placeholder="请输入密码" v-model="mdata.password">
            </div>
            <div class="row">
                <img src="/static/login/picture/yqm.png" alt="">
                <input type="text" name="up_userid" v-model="mdata.invite_code" value="{$invite_code}" placeholder="请输入邀请码">
            </div>
        </div>
        <div class="btm">
            <div class="btn" @click="send" lay-filter="sub" lay-submit>完成注册</div>
        </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="/static/login/js/config.js"></script>
<script type="text/javascript" src="/static/login/js/newapp.js"></script>
<script type="text/javascript" src="/static/login/js/swiper.min.js"></script>
<script type="text/javascript" src="/static/login/js/vue.js"></script>
<script type="text/javascript" src="/static/login/js/moment.min.js"></script>
<script src="/static/user/js/mui.min.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<!--<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,$ = layui.jquery;
        // 登录提交监听
        form.on('submit(sub)', function (data) {
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('regist')}",data.field,function(res){
                layer.close(loading);
                if(res.code > 0){
                    layer.msg(res.msg,{time:1000,icon:1},function(){
                        location.href = "{:url('index/index')}";
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    $('.captcha img').attr('src','{:url("verify")}?id='+Math.random());
                }
            });
        })
    })
</script>-->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            mdata:{
                tel:'',
                authcode:'',
                password:'',
                invite_code:''
            },
            sendcodestate:false,
            sendcodemsg:'获取验证码',
            countdown:60
        },
        methods: {
            init: function() {
                this.mdata.invite_code = h.pageParam().invite_code;
            },
            send:function() {
                var that = this;
                var phone = /^1([38]\d|[75]\d|4[57]|5[0-35-9]|7[06-8]|8[89])\d{8}$/;
                if(!phone.test(this.mdata.tel)){
                    h.toasttips(1, '请填写正确的手机号');
                    return false;
                }

                if(!this.mdata.authcode){
                    h.toasttips(1, '请输入验证码');
                    return false;
                }
                if(!this.mdata.password){
                    h.toasttips(1, '请输入密码');
                    return false;
                }
                var showProgress = h.showProgress('注册登录中');
                h.ajax(function(ret, err) {
                    h.hideProgress(showProgress);
                    if (ret.state == "0000") {
                        setTimeout(function() {
                            //已注册
                            h.toasttips(0, '注册成功！');

                            setTimeout(function(){
                                h.openwin('index','/user',{});
                            },300);

                        }, 300);
                    } else {
                        setTimeout(function() {
                            h.toasttips(1, ret.msg);
                        }, 300)
                    }
                },"login/regist_do","post",that.mdata);
            },
            sendcode:function() {
                var that = this;
                if(!this.sendcodestate){
                    var phone = /^1([38]\d|[75]\d|4[57]|5[0-35-9]|7[06-8]|8[89])\d{8}$/;
                    if(!phone.test(this.mdata.tel)){
                        h.toasttips(1, '请填写正确的手机号');
                        return false;
                    }
                    var showProgress = h.showProgress('发送中');
                    h.ajax(function(ret, err) {
                        h.hideProgress(showProgress);
                        if (ret.state == "0000") {
                            setTimeout(function() {
                                h.toasttips(0, ret.msg);
                                that.settime();
                            }, 300);
                        } else {
                            setTimeout(function() {
                                h.toasttips(1, ret.msg);
                            }, 300)
                        }
                    },"login/check_mobile","post",this.mdata);
                }
            },
            settime:function() {
                var that = this;
                if (this.countdown == 0) {
                    this.sendcodestate = false;
                    this.sendcodemsg = '获取验证码';
                    this.countdown = 60;
                    return;
                } else {
                    this.sendcodestate = true;
                    this.sendcodemsg = "重新发送(" + this.countdown + ")";
                    this.countdown--;
                }
                setTimeout(function() {
                    that.settime();
                },1000)
            },

        },
    });

    h.ready();
</script>

</html>
